import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { getBanners } from '../service/recommend';
import {
  getHotRecommend,
  getNewAlbum,
  getPlaylistDetail,
  getArtistList
} from '@/views/discover/service/recommend';

//NOTE 创建异步请求的Action
//NOTE 第一个参数 一个用于生额外 Redux action type 常数、代表着一个异步请求生命周期的字符串。pending: 'users/requestStatus/pending'
// arg是调用action传递的参数
export const fetchBannerDataAction = createAsyncThunk(
  'banners',
  async (arg, { dispatch }) => {
    const res = await getBanners();
    // return res.banners;
    //! 直接存到model里面
    dispatch(changeBannersActions(res.banners));
  }
);

// 获取热门推荐
export const fetchHotRecommend = createAsyncThunk(
  'hotRecommend',
  async (arg, { dispatch }) => {
    const res = await getHotRecommend();
    // return res.banners;
    //! 直接存到model里面
    dispatch(changeHotRecommendsActions(res.result));
  }
);

// 获取新碟推荐
export const fetchNewAlbums = createAsyncThunk(
  'newAlbum',
  async (arg, { dispatch }) => {
    const res = await getNewAlbum();

    // return res.banners;
    //! 直接存到model里面
    dispatch(changeNewAlbumsActions(res.albums));
  }
);

// 获取榜单
const rankingIds = [19723756, 3779629, 2884035];
export const fetchRankingDataAction = createAsyncThunk(
  'rankingData',
  (_, { dispatch }) => {
    // 获取榜单的数据
    // 1.每一个请求单独处理

    // 2.将三个结果都拿到, 统一放到一个数组中管理\
    // 保障一: 获取到所有的结果后, 进行dispatch操作
    // 保障二: 获取到的结果一定是有正确的顺序
    const promises: Promise<any>[] = [];
    for (const id of rankingIds) {
      promises.push(getPlaylistDetail(id));
    }

    Promise.all(promises).then((res) => {
      const playlists = res.map((item) => item.playlist);
      console.log(playlists);
      dispatch(changeRankingsAction(playlists.filter(Boolean)));
    });
  }
);

export const fetchSingersRecommend = createAsyncThunk(
  'settleSingers',
  async (arg, { dispatch }) => {
    const res = await getArtistList(5);
    // return res.banners;
    //! 直接存到model里面
    dispatch(changeSettleSingersAction(res.artists));
  }
);

interface IRecommendState {
  banners: any[];
  hotRecommends: any[];
  newAlbums: any[]; //  新碟上架
  rankings: any[]; // 榜单
  settleSingers: any[]; // 成为歌手列表
}
const initialState: IRecommendState = {
  banners: [],
  hotRecommends: [],
  newAlbums: [],
  rankings: [],
  settleSingers: []
};

const recommendSlice = createSlice({
  name: 'recommend',
  initialState,
  reducers: {
    changeBannersActions(state, { payload }) {
      state.banners = payload;
    },
    changeHotRecommendsActions(state, { payload }) {
      state.hotRecommends = payload;
    },
    changeNewAlbumsActions(state, { payload }) {
      state.newAlbums = payload;
    },
    changeRankingsAction(state, { payload }) {
      state.rankings = payload;
    },
    changeSettleSingersAction(state, { payload }) {
      state.settleSingers = payload;
    }
  },
  // 捕捉异常的
  extraReducers: (builder) => {
    builder.addCase(fetchBannerDataAction.rejected, () => {
      console.log('rejected'); // 请求失败之后
    });
  }
});

export const {
  changeBannersActions,
  changeHotRecommendsActions,
  changeNewAlbumsActions,
  changeRankingsAction,
  changeSettleSingersAction
} = recommendSlice.actions;
export default recommendSlice.reducer;
